<template>
  <div class="login-app">
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
        <h1>BK管理系统</h1>
      </div> -->
      <div>
        <el-form :rules="rules" ref="form" :model="form">
          <el-form-item prop="loginName" label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.loginName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="loginKey" label="密码" :label-width="formLabelWidth">
            <el-input
              type="password"
              v-model="form.loginKey"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="记住我" :label-width="formLabelWidth">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
        </el-form>
        <div style="margin-left: 80px" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>
          <el-button @click="form = {}">清空</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        loginName:""
      },
      formLabelWidth: "80px",
      rules: {
        loginName: [{ required: true, message: "请输入用户名" }],
        loginKey: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  methods: {
    ...mapActions("users", ["userLogin"]),
    async onSubmit(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          await this.userLogin(this.form);
          this.$router.push("/");
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
html,
body,
#__nuxt,
#__layout,
#__layout > div {
  height: 100%;
}
</style>

<style scoped>
.login-app {
  height: 100%;
  background-size: cover;
  position: relative;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;

}

.el-card {
  position: absolute;
  top: 50px;
  left:50%;
  margin-left:-20%;
  /* right: 50px; */
}
</style>
